<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生成占位图标</title>
    <style>
        body { padding: 20px; font-family: Arial; }
        canvas { border: 1px solid #ccc; margin: 10px; }
        button { padding: 10px 20px; margin: 5px; }
    </style>
</head>
<body>
    <h1>生成轻动康小程序图标</h1>
    <p>点击按钮生成占位图标文件</p>
    
    <div>
        <button onclick="generateIcon('home', '🏠', '#666666')">生成 Home (灰色)</button>
        <button onclick="generateIcon('home-active', '🏠', '#4CAF50')">生成 Home (绿色激活)</button>
        <button onclick="generateIcon('video', '▶️', '#666666')">生成 Video (灰色)</button>
        <button onclick="generateIcon('video-active', '▶️', '#4CAF50')">生成 Video (绿色激活)</button>
        <button onclick="generateIcon('community', '👥', '#666666')">生成 Community (灰色)</button>
        <button onclick="generateIcon('community-active', '👥', '#4CAF50')">生成 Community (绿色激活)</button>
        <button onclick="generateIcon('profile', '👤', '#666666')">生成 Profile (灰色)</button>
        <button onclick="generateIcon('profile-active', '👤', '#4CAF50')">生成 Profile (绿色激活)</button>
    </div>

    <div id="output"></div>

    <script>
        function generateIcon(name, emoji, bgColor) {
            const canvas = document.createElement('canvas');
            canvas.width = 40;
            canvas.height = 40;
            const ctx = canvas.getContext('2d');
            
            // 填充背景色
            ctx.fillStyle = bgColor;
            ctx.fillRect(0, 0, 40, 40);
            
            // 添加圆角和emoji
            ctx.font = '24px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = '#ffffff';
            ctx.fillText(emoji, 20, 20);
            
            // 转换为 blob 并下载
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = name + '.png';
                a.click();
                URL.revokeObjectURL(url);
                
                document.getElementById('output').innerHTML += 
                    `<p>✓ 已生成: ${name}.png</p>`;
            });
        }
    </script>
</body>
</html>


